<template>
  <div>
    <div class="wrap">
      <div class="container">
        <div class="reg-box">
          <div class="reg-box-wrap">
            <h2 class="title">用户登录</h2>
            <div class="reg-tabs">
              <div
                :class="num == 2 ? 'active' : ''"
                @click="setNum(2)"
                class="reg-tabs-item"
                style="margin-right: 40px"
              >
                密码登录
              </div>
              <div
                :class="num == 1 ? 'active' : ''"
                @click="setNum(1)"
                class="reg-tabs-item"
              >
                短信登录
              </div>
            </div>
            <div class="reg-form-warp">
              <!-- 短信登录 -->
              <el-form
                ref="ruleFormRefSms"
                :model="ruleFormSms"
                style="max-width: 600px"
                status-icon
                :rules="rules"
                label-width="auto"
                class="reg-form"
                v-show="num == 1"
              >
                <el-form-item prop="phone">
                  <el-input
                    v-model="ruleFormSms.phone"
                    placeholder="(+86) 请输入手机号码"
                    size="large"
                    type="text"
                    style="height: 44px; margin-bottom: 6px"
                    :prefix-icon="Iphone"
                  />
                </el-form-item>
                <el-form-item prop="">
                  <el-input
                    v-model="ruleFormSms.verificationCode"
                    placeholder="请输入验证码"
                    size="large"
                    type="text"
                    style="height: 44px; margin-bottom: 6px; position: relative"
                    :prefix-icon="Cellphone"
                  />
                  <span class="get-code">获取验证码</span>
                </el-form-item>
                <el-form-item>
                  <span class="reg-btn" @click="smsLogin()">登录</span>
                  <!-- <span class="reset-btn" @click="">重置</span> -->
                </el-form-item>
              </el-form>

              <!-- 密码登录 -->
              <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                status-icon
                label-width="auto"
                class="reg-form"
                v-show="num == 2"
              >
                <el-form-item prop="pass">
                  <el-input
                    v-model="input"
                    placeholder="请输入账号名称"
                    size="large"
                    type="text"
                    style="height: 44px; margin-bottom: 6px"
                    :prefix-icon="User"
                  />
                </el-form-item>
                <el-form-item prop="pass">
                  <el-input
                    v-model="input"
                    placeholder="请输入密码"
                    size="large"
                    type="password"
                    style="height: 44px; margin-bottom: 6px"
                    :show-password="true"
                    :prefix-icon="Lock"
                  />
                </el-form-item>
                <el-form-item prop="pass">
                  <el-input
                    v-model="input"
                    placeholder="请输入手机号"
                    size="large"
                    type="text"
                    style="height: 44px; margin-bottom: 6px"
                    :prefix-icon="Iphone"
                  />
                </el-form-item>
                <el-form-item prop="pass">
                  <el-input
                    v-model="input"
                    placeholder="请输入验证码"
                    size="large"
                    type="text"
                    style="height: 44px; margin-bottom: 6px; position: relative"
                    :prefix-icon="Cellphone"
                  />
                  <span class="get-code">获取验证码</span>
                </el-form-item>
                <el-form-item>
                  <span class="reg-btn">登录</span>
                  <!-- <span class="reset-btn" @click="">重置</span> -->
                </el-form-item>
              </el-form>
            </div>
            <div class="reg-tips">
              已有账号？<span
                class="login-btn"
                style="color: #dd3a5f; cursor: pointer"
                >登录</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElForm, ElFormItem, ElInput } from 'element-plus'
import { User, Lock, Iphone, Cellphone } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

const input = ref('')

let num = ref(1)

// 代码优化，num 的值只允许为 1 或 2，但代码中没有对非法值进行处理
//
const setNum = (value: number) => {
  if ([1, 2].includes(value)) {
    num.value = value
  } else {
    console.error('非法的 num 值:', value)
  }
}

//ts类型
interface RuleForm {
  phone?: string
  password?: string
  verificationCode?: string
}

// const ruleForm = reactive<RuleForm>({
//   phone: '',
//   password: '',
//   verificationCode: ''
// })

const rules = reactive({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应在6到20位之间', trigger: 'blur' }
  ],
  accountName: [
    { required: true, message: '请输入账号名称', trigger: 'blur' },
    { min: 3, max: 20, message: '账号名称长度应在3到20位之间', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码应为6位数字', trigger: 'blur' }
  ]
})

//账号密码登录
const ruleFormRef = ref('')

//短信登录
const ruleFormRefSms = ref('')

const ruleFormSms = reactive<RuleForm>({
  phone: '',
  verificationCode: ''
})

const smsLogin = () => {}
</script>

<style scoped>
.wrap {
  min-width: 600px;
  height: 100vh;
  min-height: 929px;
  background: #f7fafe;
  position: relative;
  display: flex;
  overflow-y: auto;
  .container {
    height: 100%;
    flex: 1;
    position: relative;
    background-image: url(//res.orayimg.com/oray-login/1.0/img/login-bg.9c3e2f2.jpg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-color: #f7fbff;
    .reg-box {
      border: 2px solid #fff;
      background: hsla(0, 0%, 100%, 0.6);
      border-radius: 8px;
      box-shadow: 0 4px 50px rgba(87, 126, 255, 0.04);
      backdrop-filter: blur(10px);
      min-width: 440px;
      position: absolute;
      top: calc(40% - 278.4px);
      left: 50%;
      transform: translateX(-50%);
      .reg-box-wrap {
        position: relative;
        padding: 60px 40px 0;
        .title {
          font-size: 24px;
          line-height: 32px;
          color: #1d2129;
          font-weight: 550;
        }
        .reg-tabs {
          margin-top: 32px;
          display: flex;
          color: #1d2129;
          .reg-tabs-item {
            cursor: pointer;
            padding-bottom: 8px;
            border-bottom: 2px solid transparent;
            font-size: 16px;
            line-height: 21px;
            &.active {
              color: #3773f5;
              border-bottom-color: #3773f5;
              font-weight: 550;
            }
          }
        }
        .reg-form-warp {
          margin-top: 24px;
          .reg-form {
            padding-top: 4px;
            /* padding-bottom: 60px; */
            position: relative;
            :deep(.el-input__icon) {
              color: #4e5969;
              font-size: 18px;
            }
            .get-code {
              font-size: 14px;
              line-height: 20px;
              white-space: nowrap;
              cursor: pointer;
              color: #3773f5;
              position: absolute;
              right: 18px;
              top: 13px;
            }
            .reg-btn {
              background: #dd3a5f;
              width: 100%;
              border-radius: 2px;
              box-sizing: border-box;
              color: #fff;
              cursor: pointer;
              font-size: 14px;
              height: 44px;
              line-height: 44px;
              padding: 0 12px;
              text-align: center;
            }
            .reset-btn {
              background: #fff;
              /* width: 100%; */
              border-radius: 2px;
              box-sizing: border-box;
              color: #606266;
              cursor: pointer;
              font-size: 12px;
              /* height: 34px; */
              line-height: 26px;
              padding: 0 12px;
              text-align: center;
              margin-left: 12px;
              border: 1px solid #dcdfe6;
            }
          }
        }
        .reg-tips {
          padding-bottom: 58px;
          display: flex;
          flex-direction: row;
          justify-content: end;
        }
      }
    }
  }
}
</style>
